<template>
  <jy-dialog :title="title" :visible.sync="open" width="850px" append-to-body>
    <div class="vue-office-docx-border">
      <vue-office-docx id="fileView" v-if="docx" :src="docx" @rendered="rendered" />
    </div>
    <div slot="footer" class="dialog-footer">
      <div>
        <el-button type="primary" v-if="hasDownload" :loading="printLoading" :disabled="printLoading"
          @click="onPrint">打印</el-button>
        <el-button type="primary" plain :loading="printLoading" :disabled="printLoading"
          @click="onDownload">导出</el-button>
        <el-button @click="cancel">关 闭</el-button>
      </div>
    </div>
  </jy-dialog>
</template>
<script>
import { saveAs } from "file-saver";
//引入VueOfficeDocx组件
import VueOfficeDocx from "@vue-office/docx";
//引入相关样式
import "@vue-office/docx/lib/index.css";
export default {
  name: "SupervisionPrintDialog",
  components: {
    VueOfficeDocx
  },
  data () {
    return {
      title: "监理日志 导出/打印",
      open: false,
      dataList: [],
      printLoading: false,
      exportPercentage: 0, // 初始进度值
      status: "active", // 进度条状态
      docx: "",
      fileInfo: {
        url: "",
        blob: "",
        fileName: ""
      },
      hasDownload: false,
      id: undefined
    };
  },
  created () { },
  mounted () { },
  methods: {
    init (id) {
      this.open = true;
      this.id = id;
      this.handleExport();
    },
    /** 获取文件 */
    handleExport () {
      this.hasDownload = false;
      this.download(
        "supervision/log/exportLog",
        {
          id: this.id,
        },
        `监理日志_${new Date().getTime()}.docx`,
        {},
        true
      ).then((response) => {
        console.log(response);
        const { url } = response;
        this.docx = url;
        this.fileInfo = response;
      });
    },
    rendered () {
      console.log("渲染完成");
      this.hasDownload = true;
    },
    // 打印
    onPrint () {
      let dom = document.getElementById("fileView");
      const newDom = dom.querySelector(".docx-wrapper");
      this.$print(newDom);
    },
    // 下载
    onDownload () {
      // saveAs(this.fileInfo.blob, this.fileInfo.fileName);
      this.download(
        "supervision/log/export",
        {
          id: this.id,
        },
        `监理日志_${new Date().getTime()}.pdf`,
      );
    },
    // 取消按钮
    cancel () {
      this.open = false;
    }
  }
};
</script>
<style lang="scss" scoped>
.print {
  display: flex;
  align-items: center;
  justify-content: space-between;

  ::v-deep {
    .el-progress-bar {
      width: 300px !important;
    }

    .el-progress-bar__outer {
      height: 15px !important;
    }

    .el-progress-bar__inner {
      background-color: #409eff;
      background-image: -webkit-linear-gradient(45deg,
          rgba(255, 255, 255, 0.15) 25%,
          transparent 25%,
          transparent 50%,
          rgba(255, 255, 255, 0.15) 50%,
          rgba(255, 255, 255, 0.15) 75%,
          transparent 75%,
          transparent);
      background-image: -o-linear-gradient(45deg,
          rgba(255, 255, 255, 0.15) 25%,
          transparent 25%,
          transparent 50%,
          rgba(255, 255, 255, 0.15) 50%,
          rgba(255, 255, 255, 0.15) 75%,
          transparent 75%,
          transparent);
      background-image: linear-gradient(45deg,
          rgba(255, 255, 255, 0.15) 25%,
          transparent 25%,
          transparent 50%,
          rgba(255, 255, 255, 0.15) 50%,
          rgba(255, 255, 255, 0.15) 75%,
          transparent 75%,
          transparent);
      -webkit-background-size: 1rem 1rem;
      background-size: 1rem 1rem;
      animation: 2s linear infinite pbs;
      animation-iteration-count: 10;
    }

    @keyframes pbs {
      0% {
        background-position-x: 1rem;
      }
    }
  }
}

.vue-office-docx-border {
  // width: 210mm;
  height: calc(297mm + 20px);

  ::v-deep {
    .docx-wrapper {
      background-color: #ffffff;
      padding: 0;
    }

    .docx {
      box-shadow: 0 0 0px rgba(0, 0, 0, 0.5);
    }
  }
}

.vue-office-docx-border-none {
  display: none;
}
</style>
